<template>
    <div class="container">

        <!-- 轮播图区域 -->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunboList" :key="item.Id">
                <img :src="item.imgUrl" alt="">
            </mt-swipe-item>
        </mt-swipe>


        <!-- 中间列表区域 -->
        <ul class="tab-nav">
            <li v-for="(tab,i) in tabs" :key="tab.id" class="tab-li" @click="changeTab(i)">
                <nav class="navbar-header">
                    {{tab.title}}
                </nav>
            </li>
        </ul>
        
        <div class="content">

            <div :id="'minirefresh'+i"  v-for="(listItem,i) in listData" :key="'key'+i" :class='["minirefresh-wrap", i!=0?"minirefresh-hidden":""]'>
                <div class="minirefresh-scroll">
                    <ul class="listdata" :id="'listData'+i">
                        <li :key="item.gameId" v-for="item in listItem" class="listdata-li">
                            <a href="">
                                <img class="imgUrl" :src="item.src" alt="">
                                <div class="right">
                                    <h5 class="name">
                                        {{item.name}}
                                        <img class="icon_hot" src="https://downqn.tuyoo.com/offical_accounts/gameBox/icon_tag@2x.png"/>
                                    </h5>
                                    <p class="des">{{item.description}}</p>
                                    <p class="howmany"><em>{{item.people}}</em>人在玩</p>
                                </div>
                                <button class="goGame">进入</button>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							社会
						</a>
					</div>
				</div>
        </div> -->
    </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js";
import "../../common.css";
// import "../../fun.scss";

let idealViewWidth = window.screen.width;
document.documentElement.style.fontSize = idealViewWidth / 750 * 100 + "px";
// import './components/tabbar/Home.vue'
export default {
  data() {
    return {
      lunboList: [],
      miniRefresh: [],
      maxDataSize: 12,
      requestDelayTime: 600,
      listData: [],
      page: [],
      tabs:[]
    };
  },
  created() {
    this.getLunbotu();
    this.getTabs();
  },
  mounted() {
  },
  methods: {
    changeTab(index){
        
    },
    getLunbotu() {
      this.$http
        .get("http://wx.tuyoo.com/?act=winnie.sunbanner")
        .then(result => {
          if (result.body.code === 0) {
            this.lunboList = result.body.bannner;
          }
        });
    },
    createTestData(downOrup,index) {
        let tab = index -0 +1;
      this.$http
        .get(
          "http://h5game.tuyoo.com/?act=game.getinfo&tab="+tab+"&psize=10&page=" +this.page[index]
        )
        .then(result => {
          if (result.body.retCode === 1) {
            let totalPage = result.body.data.totalPage;
            let len = result.body.data.list.length;
            if (len == 0) {
              if (downOrup == "down") {
                this.miniRefresh[index].endDownLoading(true); // 结束上拉加载
              } else {
                this.miniRefresh[index].endUpLoading(true); // 结束上拉加载
              }
              return;
            }
            if (downOrup == "down") {
              this.listData[index] = result.body.data.list;
                this.$set(this.listData, index, this.listData[index]);
              this.miniRefresh[index].endDownLoading(true); // 结束下拉刷新
            } else {
              this.listData[index] = this.listData[index].concat(result.body.data.list);
            //   console.log(this.listData[index]);
                this.$set(this.listData, index, this.listData[index]);
              if (totalPage == this.page[index]) {
                this.miniRefresh[index].endUpLoading(true); // 结束上拉加载
              } else {
                this.miniRefresh[index].endUpLoading(false); //
              }
            }
          } else {
            console.log(data.body);
            if (downOrup == "down") {
                this.miniRefresh[index].endDownLoading(true); // 结束上拉加载
              } else {
                this.miniRefresh[index].endUpLoading(true); // 结束上拉加载
              }
          }
        });
    },
    initRefresh(index){
        var thst = this;
        this.miniRefresh[index] = new MiniRefresh({
            container: "#minirefresh"+index,
            down: {
                callback() {
                    thst.page[index] = 1;
                    thst.createTestData("down",index);
                }
            },
            up: {
                isAuto: true,
                loadFull: {
                    isEnable: false
                },
                callback: function() {
                    thst.page[index]++;
                    thst.createTestData("up",index);
                }
            }
        });
    },

    getTabs() {
        var _selff= this;
        this.$http.get('src/ajax_tabs.json').then(result =>{
            if(result.body.retCode === 1){
                this.tabs = result.body.data.tabs;
                this.tabs.forEach(function(e,i){
                    _selff.listData[i]=[];
                    _selff.page[i]=0;
                    
                })
               
                setTimeout(() => {
                     _selff.tabs.forEach(function(e,i){
                        _selff.initRefresh(i);//初始化插件
                    })
                }, 0);
               
                
                
                
                
            }
        })
    }
    
  }
};
</script>

<style lang="scss" scoped>
.container {
  // z-index: 99;
  .mint-swipe {
    width: 100%;
    height: 3rem;
    img {
      height: 3rem;
      width: 100%;
    }
  }
  #slider {
    position: absolute;
    left: 0;
    top: 9.375rem;
    // width: 100%;
    .mui-scroll a {
      display: inline-block;
      width: 5.45rem;
    }
  }
}

.tab-nav {
  position: absolute;
  top: 3rem;
  left: 0;
  width: 7.5rem;
  display: flex;
  height: 0.94rem;
  border-bottom: 1px solid #ededed;
  overflow: hidden;
}
.tab-nav li {
  flex: 1;
  color: #8b8b8b;
  text-align: center;
  font-size: 0.3rem;
  line-height: 0.94rem;
  border-right: 1px solid #ededed;
  background: #f2f2f2;
}
.tab-nav li span {
  display: inline-block;
  height: 0.85rem;
}
.tab-nav li.active {
  background: #ec414d;
  color: #fff;
}
.tab-nav li.active span {
  border-bottom: 0.06rem solid #ec414d;
}
.tab-nav li:last-child {
  border-right: 0;
}

.minirefresh-wrap {
  top: 4.14rem;
}
ul.listdata li {
  cursor: pointer;
  width: 7.2rem;
  height: 1.2rem;
  padding-left: 0.3rem;
  margin-bottom: 0.4rem;
  img.imgUrl {
    width: 1.2rem;
    height: 1.2rem;
    background: #d8d8d8;
    float: left;
    border-radius: 0.1rem;
  }
  .right {
    float: left;
    margin-left: 0.16rem;
    .name {
      font-weight: normal;
      font-size: 0.3rem;
      color: #1f1f1f;
      .icon_hot {
        width: 0.3rem;
        height: 0.3rem;
        vertical-align: text-top;
        margin-left: 0.1rem;
      }
    }
    .des {
      width: 4.08rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.22rem;
      vertical-align: middle;
      line-height: 2em;
    }
    .howmany {
      font-size: 0.22rem;
      line-height: 1.5em;
      color: #999;
    }
  }
  .goGame {
    width: 1.08rem;
    margin-top: 0.28rem;
    line-height: 0.52rem;
    background: #ec414d;
    text-align: center;
    font-size: 0.26rem;
    color: #fff;
    float: right;
  }
}
</style>

